<template>
	<div>
		<el-table :data="mealInfo" height="700" border style="width: 100%;">
			<el-table-column prop="mealName" label="套餐名称" width="150">
			</el-table-column>
			<el-table-column prop="mealType" label="套餐类型" width="150">
			</el-table-column>
			<el-table-column prop="mealState" label="套餐状态" width="150">
			</el-table-column>
			<el-table-column prop="mealMoney" label="套餐价格">
			</el-table-column>
			<el-table-column prop="mealState" label="订单id" width="150">
			</el-table-column>
			<el-table-column prop="mealState" label="用户id" width="150">
			</el-table-column>
			<el-table-column label="操作" width="170" fixed="right">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small" icon="el-icon-document">详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
		<el-dialog title="详细信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<orderComplaintForm></orderComplaintForm>


			<!-- <span :v-model="rowinfo"></span> -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import orderComplaintForm from '@/components/order_complaint/order_complaint_form.vue'
	export default {
		data() {
			return {
				dialogVisible:false,
				mealInfo: [{
						mealId: '2',
						mealName: '2',
						mealMsg: '3',
						mealType: '4',
						mealState: '5',
						mealMoney: '6',
						mealTime: '7',
						mealRemark: '8',
					},
					{
						mealId: '1',
						mealName: '2',
						mealMsg: '3',
						mealType: '4',
						mealState: '5',
						mealMoney: '6',
						mealTime: '7',
						mealRemark: '8',
					},
					{
						mealId: '1',
						mealName: '2',
						mealMsg: '3',
						mealType: '4',
						mealState: '5',
						mealMoney: '6',
						mealTime: '7',
						mealRemark: '8',
					},
					{
						mealId: '1',
						mealName: '2',
						mealMsg: '3',
						mealType: '4',
						mealState: '5',
						mealMoney: '6',
						mealTime: '7',
						mealRemark: '8',
					},
					{
						mealId: '1',
						mealName: '2',
						mealMsg: '3',
						mealType: '4',
						mealState: '5',
						mealMoney: '6',
						mealTime: '7',
						mealRemark: '8',
					}
				]
			}

		},
		methods: {
			handleClick(row) {
				this.dialogVisible = true
				this.rowinfo = row
				//console.log(row.mealId)
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			}

		},
		components:{
			orderComplaintForm
		}

	}
</script>
<style>
	el-table-column {
		height: 50px;
	}

	.el-main {
		line-height: 20px;
	}
</style>
